import React from "react"
import { Card, Tag, Button } from "antd"
import { IProject } from "../../mock/mockdata"
import styles from "./ProjectCard.module.scss"

const { Meta } = Card

interface ProjectCardProps {
  project: IProject
}

const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
  return (
    <Card
      hoverable
      cover={
        <div className={styles["card-cover"]}>
          <img alt={project.title} src={project.thumbnail} />
        </div>
      }
      actions={[
        <Button
          type="link"
          href={project.projectLink}
          target="_blank"
          key="view"
        >
          View Project
        </Button>,
      ]}
    >
      <Meta title={project.title} description={project.description} />
      <div style={{ marginTop: "10px" }}>
        <div>
          <strong>Category:</strong> {project.category}
        </div>
        <div>
          <strong>Tags:</strong>{" "}
          {project.tags.map((tag) => (
            <Tag key={tag}>{tag}</Tag>
          ))}
        </div>
        <div>
          <strong>Tech Stack:</strong> {project.techStack.join(", ")}
        </div>
        <div>
          <strong>Created At:</strong>{" "}
          {new Date(project.createdAt).toLocaleDateString()}
        </div>
        <div>
          <strong>Updated At:</strong>{" "}
          {new Date(project.updatedAt).toLocaleDateString()}
        </div>
      </div>
    </Card>
  )
}

export default ProjectCard
